import React from 'react';
import { View, Text, StyleSheet, Image,ImageBackground} from 'react-native';
import { deviceWidth } from 'src/util'
import Modal from 'react-native-modal'
import { deviceHeight, titleHeight } from '../../../../util';
import { Flex } from '@ant-design/react-native';


export default class VersionAlertView extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isVisible: false,
        }
    }
    showOrDismiss = (flag) => {
        this.setState({ isVisible: flag });
    }

    componentDidMount = () => {
        this.state.isVisible = this.props.isVisible;
    }



    render() {
        const {version,content} = this.props
        return (
            <Modal isVisible={this.state.isVisible}
            animationInTiming={500}
            animationOutTiming={100}
            animationIn="zoomInUp"
            animationOut={'zoomOutDown'}
                backdropOpacity={0.2}
                style={{
                    marginLeft: 10,
                    marginRight: 10,
                    justifyContent: 'flex-start',
                    marginTop: 50,
                }}
                onBackdropPress={() => {
                    this.showOrDismiss(false);
                }}>

                <ImageBackground style={{marginLeft:40,marginTop:titleHeight*2,paddingVertical:20, width:deviceWidth-100}}
                    source={require('src/assets/mine/alertViewVersion.png')}>
                    <View style={{marginLeft:20,marginTop:10}}>
                        <Text style={{color:'#fff',fontSize:22,fontWeight:'bold'}}>发现新版本</Text>  
                        <Text style={{color:'#fff',fontSize:16,marginTop:10}}>{version}</Text>  
                    </View>

                    <View style={{marginLeft:10,height:150,marginTop:50}}>
                        <Text style={{marginTop:10,fontSize:15,color:'#2E2E2E'}}>更新内容</Text>
                        {content.map((item, index) => {
                            return <Text style={{marginTop:20,fontSize:14,color:'#8E8E93'}} key={index}> {item}</Text>
                        })}
                    </View>
                    <Flex 
                    justify='center'
                    align='center'
                    style={{marginTop:titleHeight,marginHorizontal:20,paddingVertical:15,borderRadius:25,backgroundColor:'#ff2121'}}
                    onPress={()=>{
                        this.props.callback()
                    }}>
                        <Text style={{color:'#fff',fontSize:15}}>前去下载</Text>  
                    </Flex>

                </ImageBackground>
            </Modal>

        )
    }
}

const styles = StyleSheet.create({
    image: {
        width: 40,
        height: 40,
        marginLeft: 20
    },
    TextPosition: {
        marginTop: 10,
        marginLeft: 15,
        fontSize: 15
    },
    cellView: {
        height: 80,
        width: deviceWidth,
        paddingLeft: 20,
        paddingRight: 30
    }

})